<template>
    <div class="fab-container" :class="`fab-${position}`">
        <!-- 主按钮 -->
        <van-floating-bubble icon="plus" axis="xy" @click="toggleButtons" class="main-button" />

        <!-- 子按钮组 -->
        <transition-group name="fab-item">
            <van-button v-for="(btn, index) in buttons" v-show="showSubButtons" :key="btn.name" :icon="btn.icon" size="small"
                :type="btn.type" round class="sub-button" :style="getButtonStyle(index)"
                @click="handleClick(btn.name)" />
        </transition-group>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { showToast } from 'vant'

// 接收父组件传参
const props = defineProps({
    position: { type: String, default: 'right' }
})

// 子按钮列表
const buttons = ref([
    { name: '我要收藏', icon: 'star', type: 'success' },
    { name: '我要投币', icon: 'gold-coin', type: 'danger' },
    { name: '我要点赞', icon: 'good-job', type: 'warning' }
])

// 控制子按钮显示
const showSubButtons = ref(false)
const toggleButtons = () => {
    showSubButtons.value = !showSubButtons.value
}

// 子按钮点击
const handleClick = (name) => {
    showToast(name)
    showSubButtons.value = false
}

// 计算子按钮偏移位置样式
const getButtonStyle = (index) => {
    const offsetY = (index + 1) * 60
    return {
        position: 'absolute',
        right: props.position === 'right' ? '0' : 'auto',
        left: props.position === 'left' ? '0' : 'auto',
        bottom: `${offsetY}px`,
        zIndex: 10
    }
}
</script>

<style scoped>
.fab-container {
    position: fixed;
    right: 16px;
    bottom: 53px;
    z-index: 100;
}

.fab-left {
    right: auto;
    left: 16px;
}

.main-button {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.sub-button {
    margin-top: 10px;
    display: flex;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* transition: all 0.3s ease; */
}
/* 
.fab-item-enter-active,
.fab-item-leave-active {
    transition: all 0.3s;
}

.fab-item-enter-from,
.fab-item-leave-to {
    opacity: 0;
    transform: translateY(30px);
} */
</style>